<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useStockStore } from '@/stores/stockStore'
  const stockStore = useStockStore()
  const stockSearch = ref('')
  // 添加筛选股票
  const onStockSelectEvent = (item: {
    code: string
    name: string
    exclusive: boolean
  }) => {
    if (item.exclusive) {
      stockStore.stockSelectList.push(item)
    } else {
      // 从选中列表移除
      stockStore.stockSelectList = stockStore.stockSelectList.filter(i => i.code !== item.code)
    }
  }
  const onRemoveSelectStock = (item: {
    code: string
    name: string
    exclusive: boolean
  }) => {
    // 从选中列表移除
    stockStore.stockSelectList = stockStore.stockSelectList.filter(i => i.code !== item.code)
    // 将对应列表中的选择重新设置为false
    const target = stockStore.stockInfoList.find(i => i.code === item.code)
    if (target) target.exclusive = false
    selectedFilteredCode.value = ''
  }

  const selectedFilteredCode = ref('')
  const selectedAllCode = ref('')
  const searchWindow = ref('')
  const searchStartDate = ref('')
  const searchEndDate = ref('')
  const onFilterItemClick = (item: string) => {
    selectedFilteredCode.value = item
  }
  // 搜索
  const onSearchClick = () => {
    let searchCode = selectedAllCode.value
    if (selectedFilteredCode.value) {
      searchCode = selectedFilteredCode.value
      selectedAllCode.value = ''
    }
    stockStore.getStockPriceList(searchCode, searchWindow.value, searchStartDate.value, searchEndDate.value)
  }
  onMounted(() => {
    stockStore.getStockInfoList()
  })
</script>

<template>
  <v-container>
    <v-row>
      <v-col cols="8">
        <v-sheet
          border
          elevation="4"
          rounded
        >
          <v-text-field
            v-model="stockSearch"
            hide-details
            label="Search"
            prepend-inner-icon="mdi-magnify"
            single-line
            variant="outlined"
          />
          <v-data-table :items="stockStore.stockInfoList" :search="stockSearch">
            <template #item.exclusive="{ item }">
              <v-checkbox-btn
                v-model="item.exclusive"
                :ripple="false"
                @update:model-value="onStockSelectEvent(item)"
              />
            </template>
          </v-data-table>
        </v-sheet>
      </v-col>
      <v-col cols="4">
        <v-card
          hover
          link
          subtitle="筛选股票"
          variant="outlined"
        >
          <div style="height: 400px; overflow-y: auto;">
            <v-list>
              <v-list-item
                v-for="item in stockStore.stockSelectList"
                :key="item.code"
                link
                @click="onFilterItemClick(item.code)"
              >
                <v-list-item-title>{{ item.code }} - {{ item.name }}</v-list-item-title>

                <template #append>
                  <v-icon
                    icon="mdi-close-circle"
                    style="cursor: pointer"
                    @click.stop="onRemoveSelectStock(item)"
                  />
                </template>
              </v-list-item>
            </v-list>
          </div>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-sheet
          border
          elevation="4"
          rounded
        >
          <v-form>
            <v-container>
              <v-row align="center">
                <v-col cols="2">
                  <v-autocomplete
                    v-model="selectedFilteredCode"
                    item-title="code"
                    item-value="code"
                    :items="stockStore.stockSelectList"
                    label="筛选股票"
                  />
                </v-col>

                <v-col cols="2">
                  <v-autocomplete
                    v-model="selectedAllCode"
                    item-title="code"
                    item-value="code"
                    :items="stockStore.stockInfoList"
                    label="股票代码"
                  />
                </v-col>

                <v-col cols="2">
                  <v-text-field v-model="searchWindow" label="时间窗口" required />
                </v-col>

                <v-col cols="2">
                  <v-text-field v-model="searchStartDate" label="开始日期" required />
                </v-col>

                <v-col cols="2">
                  <v-text-field v-model="searchEndDate" label="结束日期" required />
                </v-col>

                <!-- 垂直+水平居中按钮 -->
                <v-col class="d-flex flex-column align-center justify-center" cols="2">
                  <v-btn prepend-icon="mdi-magnify" variant="outlined" @click="onSearchClick">
                    搜索
                  </v-btn>
                </v-col>
              </v-row>
            </v-container>
          </v-form>
          <v-data-table :items="stockStore.stockPriceList" />
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped lang="scss">

</style>
